<template>
	<view>
		<view class="top">
			<view class="dateSelect">
				<view style="width: 25%;">选择日期：</view>
				<picker mode="date" :start="startDate" :end="endDate" @change="bindDateChange1"
					style="width: 30%;background-color: #fff;">
					<view class="uni-input">{{this.startTime}}</view>
				</picker>
				<view style="margin-left: 5px;margin-right: 5px;">—</view>
				<picker mode="date" :start="startDate" :end="endDate" @change="bindDateChange2"
					style="width: 30%;background-color: #fff;">
					<view class="uni-input">{{this.endTime}}</view>
				</picker>
			</view>
			<view class="condition">
				<!-- 				<view class="condition-tip">检索: </view> -->
				<view style="display: flex;">
					<view>按地图检索:</view>
					<picker @change="mapConfirm" :value="mapId" :range="mapList" range-key="mapName" class="select">
						<view class="confirm">
							<view style="margin-left: 5px;width: 100%;">{{ mapList[mapId].mapName }}</view>
							<fui-icon name="arrowdown" style="justify-self: flex-end;"></fui-icon>
						</view>
					</picker>
					<button type="primary" style="height: 28px;width:60px;font-size: 12px;" @tap="taskSearch">搜索</button>
				</view>
			</view>
			<view class="task-body">
				<view v-for="(task, index) in taskList" :key="index" class="task-content">
					<view class="task-left">
						<view class="task-name">{{task.inspectionWork.inspectionWorkName}}</view>
						<view class="task-area">区域：{{task.map.mapName}}</view>
						<view class="task-status">
							<view>状态：</view>
							<view>
								<view style="color: #0A60BD;" v-if="task.inspectionWork.inspectionWorkStatus === 0">处理中</view>
								<view style="color: red;"  v-else-if="task.inspectionWork.inspectionWorkStatus === 1">已超时</view>
								<view style="color: #4CAF50;" v-else-if="task.inspectionWork.inspectionWorkStatus === 2">已完成</view>
								<view style="color: grey;"  v-else-if="task.inspectionWork.inspectionWorkStatus === 3">已取消</view>
								<view style="color: grey;" v-else-if="task.inspectionWork.inspectionWorkStatus === 4">未开始</view>
								<view v-else>未知状态</view>
							</view>
						
						</view>
						<view class="task-botom">
							<view class="task-schedule">
								进度：{{task.inspectionWork.inspectionWorkFinish}}/{{task.inspectionWork.inspectionWorkNumber}}
							</view>
							<view class="task-time">
								<view class="time-start">
									开始时间：{{task.inspectionWork.inspectionStartTime.match(/^\d{4}-\d{2}-\d{2}/)[0]}}
								</view>
								<view class="time-end">限定完成时间：{{task.inspectionWork.inspectionLimitTime}}小时</view>
							</view>
						</view>
					</view>
					<view class="task-right" @tap="goToTaskInfo(task)">详情-></view>
				</view>
				<view class="tips">没有更多数据了</view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '../../../common/request';
	export default {
		data() {
			return {
				date: "",
				startTime:"",
				endTime:"",
				userId: 0,
				taskList: [],
				mapId: 0,
				mapList: [],
				workerArray: [],
				index: [0, 0],
				classId: 0,
				array: [],
				workerId: 0,
				result: "全部",
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad() {
			uni.setTabBarItem({
				index: 2,
				visible: true
			})
			uni.setTabBarItem({
				index: 3,
				visible: true
			})
			uni.setTabBarItem({
				index: 0,
				visible: false
			})
			uni.setTabBarItem({
				index: 1,
				visible: false
			})
			let userInfo = uni.getStorageSync('userInfo')
			this.username = userInfo.realName;
			this.userId = userInfo.userId;
			this.getInspection()
			this.date = this.getDate()
			this.startTime = this.getDate('start')
			this.endTime = this.getDate('end')
			this.getMaps()
			this.taskSearch()
		},
		methods: {
			bindDateChange1: function(e) {
				console.log("时间")
				console.log(e.detail.value)
				this.startTime = e.detail.value
			},
			bindDateChange2: function(e) {
				this.endTime = e.detail.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
	
				if (type === 'start') {
					month = month > 1 ? month-1 : 1
					day = month > 1 ? day : 1
				} else if (type === 'end') {
					year = year;
				}

				return `${year}-${month}-${day}`;
			},
			goToTaskInfo(task) {
				let schedule = task.inspectionWork.inspectionWorkFinish + '/' + task.inspectionWork.inspectionWorkNumber
				uni.navigateTo({
					url: `/pages/tasks/taskInfo?name=${task.inspectionWork.inspectionWorkName}&status=${task.inspectionWork.inspectionWorkStatus}&schedule=${schedule}&startTime=${task.inspectionWork.inspectionStartTime}&limitTime=${task.inspectionWork.inspectionLimitTime}&finishTime=${task.inspectionWork.inspectionEndTime}&mapId=${task.map.mapId}&mapName=${task.map.mapName}&inspectionWorkId=${task.inspectionWork.inspectionWorkId}`
				})
			},
			getInspection() {
				request(`/inspection/${this.userId}`, 'GET').then(res => {
					console.log(res.data.data)
					this.taskList = res.data.data
				})
			},
			mapConfirm(e) {
				console.log(e)
				this.mapId = e.detail.value
				console.log("mapId=" + this.mapId)
			},
			getMaps() {
				request('/inspection/map/nopage', 'GET').then(res => {
					console.log(res)
					this.mapList = res.data.data
					this.mapList.splice(0,1)
					this.mapList[0].mapName = "全部"
				})
			},
			taskSearch(){
				console.log(this.mapId)
				console.log(this.startTime+" "+this.endTime)
				//进行查询
				request(`/inspection/search/${this.userId}`, 'POST', {
					"startTime": this.startTime,
					"endTime": this.endTime,
					"searchUserId": this.userId,
					"mapId": this.mapId == 0 ? -1 : (this.mapId+1)
				}).then(res => {
					console.log("查询任务数据完成:")
					console.log(res)
					this.taskList = res.data.data
				})
			}
		}
	}
</script>

<style scoped>
	.top {
		width: 90%;
		margin: 5%;
	}

	.dateSelect {
		height: 25px;
		width: 100%;
		display: flex;
	}

	.condition {
		display: flex;
		flex-direction: column;
		margin-top: 10px;
	}

	.condition-tip {
		display: flex;
		align-items: center;
	}

	.search {
		background-color: #fff;
		margin-left: 10px;
		padding: 3px;
		width: 30%;
	}

	.task-body {
		margin-top: 30px;
	}

	.task-content {
		padding-bottom: 20px;
		display: flex;
		padding: 20px;
		background-color: #fff;
		margin: 10px;
		border-radius: 20px;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.15);
	}

	.task-left {
		display: flex;
		flex-direction: column;
		width: 80%;
	}

	.task-name {
		font-size: 25px;
	}

	.task-botom {
		display: flex;
	}

	.task-schedule {
		text-align: left;
		align-self: center;
		width: 50%;
	}

	.task-time {
		font-size: 10px;
	}

	.task-right {
		align-self: center;
	}

	.tips {
		text-align: center;
		color: gray;
	}

	.select {
		width: 50%;
		margin-left: 10px;
		height: 28px;
	}


	.confirm {
		background-color: #fff;
		width: 100%;
		height: 28px;
		display: flex;
		justify-content: left;
		font-size: 15px;
		align-items: center;
	}
	.task-status{
		margin-bottom: 10px;
		display: flex;
	}
</style>
